<template>
  <div>
    <!-- <heads>
      <template v-slot:head>
        <div>
          <h1>这是插槽</h1>
        </div>
      </template>

      <template v-slot:foot>
        <h2>这是插槽22222</h2>
      </template>
    </heads> -->
    <!-- 插槽说白了就是把组件开标签和闭标签之间的内容展示出来，如果有很多个插槽的时候，可以给他们请名字，就叫具名插槽（命名插槽）v-slot:名字  使用的时候使用slot标签 用name属性标注名字 -->

    <van-nav-bar title="学习记事本" :class="bg">
      <template #right>
        <van-icon name="wap-nav" size="18" @click="show = true" />
      </template>
    </van-nav-bar>
    <!-- 头部内容 -->

    <van-search
      v-model="value"
      show-action
      placeholder="请输入任务"
      @search="add"
    >
      <template #action>
        <div @click="add">提交</div>
      </template>
    </van-search>
    <!-- 搜索框部分 -->

    <list></list>

    <van-popup
      v-model="show"
      position="left"
      :style="{ height: '100%', width: '30%' }"
    >
      <button @click="bg = 'blue'">蓝色</button>
      <button @click="bg = 'pink'">粉色</button>
      <button @click="bg = 'red'">红色</button>
    </van-popup>
  </div>
</template>
<script>
import heads from "../components/head";
import list from "../components/list";
export default {
  data() {
    return {
      value: "",
      show: false,
      bg: "pink",
    };
  },
  methods: {
    add() {
      var obj = {
        title: this.value,
        state: 0,
        time: new Date(),
      };
      this.$store.commit("add", obj);
    },
  },
  components: {
    heads,
    list,
  },
};
</script>
<style lang="scss" scoped>
.van-nav-bar.pink {
  background-color: pink !important;
}
.van-nav-bar.blue {
  background-color: blue !important;
}
.van-nav-bar.red {
  background-color: red !important;
}
</style>
